<template name="ShareBtn">
	<div>
		<u-popup v-model="show" mode="bottom">
			<div class="u-flex box">
				<div class="item" @click="putAwayPop">
					<button open-type="share" class="share1" plain="true"></button>
					<div class="u-pt-5">微信好友</div>
				</div>
				<div class="item">
					<button class="share2" plain="true" @click="createPoster(docUnid,url,route,newId,type,taskTimes,naturalKey,posterData)"></button>
					<div class="u-pt-5">{{btnText?btnText:'定制分享码'}}</div>
				</div>
			</div>
		</u-popup>
		<button type="primary" @click="show = true" class="share" v-if="style==0 && btn">{{btn}}</button>
		<button type="primary" @click="show = true" class="share" v-if="style==0 && !btn">分享</button>
		<button class="customStyle1" @click="show = true" v-if="style==1">
			<u-icon name="share" color="#9d9d9d" size="45"></u-icon>
		</button>
		<button class="customStyle2" @click="show = true" v-if="style==2">
			<u-icon name="share" color="#9d9d9d"></u-icon>
			<span style="font-size: 18rpx;">分享</span>
		</button>
		<button class="customStyle3" @click="show = true" v-if="style==3">
			<u-icon name="share" color="#9d9d9d"></u-icon>
			<span class="customStyle3-span">分享</span>
		</button>
		<button class="customStyle1" @click="show = true" v-if="style==4">
			<u-icon name="zhuanfa" color="#9d9d9d" size="45"></u-icon>
		</button>
		<button class="customStyle5" @click="show = true" v-if="style==5">
			<u-icon name="zhuanfa" color="#9d9d9d" size="45"></u-icon>
			<span class="customStyle3-span">分享</span>
		</button>
		<button class="customStyle5" @click="show = true" v-if="style==6">
			<u-icon name="zhuanfa" color="#000000" size="45"></u-icon>
			<span class="customStyle5-span">分享</span>
		</button>
		<button :class="shareBtnStyle" @click="show = true" v-if="style==7">
			<span :class="shareBtnSpan">{{btn}}</span>
		</button>
		<button :class="shareBtnStyle" @click="createPoster(docUnid,url,route,newId,type,taskTimes,naturalKey,posterData)" v-if="style==8"></button>
		<div v-if="style==9"></div>
		<div v-if="style==10" @click.stop="show = true">
			<u-icon name="more-dot-fill"></u-icon>
		</div>
		
		<!-- 弹窗展示二维码 -->
		<div>
			<u-modal v-model="modal_show" title="长按保存图片，扫码即可参与！" @confirm="delQrCode">
				<div class="u-pt-20 u-pb-20">
					<div style="width: 50%;margin: 0 auto;">
						<u-image :src="maskData" mode="widthFix" @longpress="saveImg(maskData)"></u-image>
					</div>
					<!-- <div class="u-mt-20 u-mb-20 u-pt-10 u-pb-10 u-pl-5 u-pr-5 u-ml-10 u-mr-10 invite">
						<div>
							<span class="invite-tip">长按保存图片后，分享到群或网上广邀好友扫码。成功注册后，好友和您额外可得10积分哦！</span>
						</div>
					</div> -->
				</div>
			</u-modal>
		</div>
		<!-- 弹窗type=2时生成海报 -->
		<div>
			<u-modal v-model="poster_modal_show"
				confirm-text="保存海报分享好友" 
				confirm-color="#eb5468"
				:mask-close-able="true" 
				:show-title="false"
				@confirm="SaveAlbum(PosterURL)">
				<u-image :src="PosterURL" mode="widthFix" @longpress="saveImg(PosterURL)"></u-image>
			</u-modal>
		</div>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		name: "ShareBtn",
		props:[
			"docUnid",
			"url",
			"route",
			"style",
			"newId",
			"btn",
			"type",
			"taskTimes",
			"naturalKey",
			"btnText",
			"shareBtnStyle",
			"shareBtnSpan",
			"posterData"
		],
		data() {
			return {
				show: false,
				maskData: '',
				modal_show: false,
				QRID: '',
				poster_modal_show: false,
				PosterURL: ''
			}
		},
		
		methods:{
			/**
			 * 生成生成海报
			 */
			async createPoster(docUnid,url,route,newId,type,taskTimes,naturalKey,posterData){
				// let res = await this.$u.api.unifyRequest({
				// 	appid: 'AppletInterface',
				// 	wf_num: 'R_AppletInterface_BD01',
				// 	path: route,//类型
				// 	loading: true, //默认发起请求会有一个全局的Loading，设置false可去掉
				// });
				// if(res.code == "200"){
					//如果有传newId，表示需要先跳转到分享页面（share.vue）,需要在分享表中记录多一条记录
					if(this.isNotNull(newId)){
						this.recordShareInfo(docUnid,newId)
					}
					this.QRID = this.guid()
					const userInfo = uni.getStorageSync('userInfo');
					let result = await this.$u.api.unifyRequest({
						appid: 'ACTIVITY',
						wf_num: 'R_ACTIVITY_BY002',
						url: url,//转向地址
						docUnid: docUnid,
						// type: res.type,//类型
						completedTimes: 0,//已完成分享次数
						taskTimes: taskTimes?taskTimes:'',//分享任务数
						rulesImplemented: 0,//是否已经执行完成规则
						naturalKey: naturalKey?naturalKey:'',//业务主键id
						loading: true, //默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if(result.code == "200"){
						//分享成功回调
						let obj = {
							NewId: result.shareId,// 分享记录id 2023-05-22 add by lys 
							docUnid: docUnid,
							// shareType: res.type,
							shareAddress: url,
							shareSource: route
						}
						this._runShareCallBack(obj)
						if(type == 2){
							this.createCustomPoster(result.scene,docUnid,posterData)
						}else{
							this.createQrCode(result.scene,docUnid)
						}
					}else{
						this.showMSG('error',result.msg)
					}
				// }
			},
			
			/** 
			 * type=2时创建海报
			 */
			async createCustomPoster(scene,docUnid,posterData){
				this.showLoading()
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/applets/create/poster",
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					avatarUrl: userInfo.avatarUrl,
					imageUrl: posterData.imageURL,
					productName: posterData.productName,
					productPrice: posterData.productPrice,
					pageUrl: 'pages_tabbar_contact/common_contact/guide',
					paramArgs: scene,
					inviteMsg: posterData.invitemsg,
					type: posterData.type,
					giudeText: posterData.giudeText?posterData.giudeText:'',
					priceDesc: posterData.priceDesc?posterData.priceDesc:'',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.PosterURL = result.data
					this.hideLoading()
					this.poster_modal_show = true
				}else{
					this.showMSG('error','出错啦')
				}
			},
			
			/**
			 * 生成二维码
			 */
			async createQrCode(scene,docUnid) {
				this.showLoading();
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/applets/create/qr/code",
					page: 'pages_tabbar_contact/common_contact/guide',
					scene: scene,
					envVersion: globalData.envVersion,
					width: '800'
				});
				if(result.code == 200){
					this.maskData = result.data;
					this.hideLoading()
					this.modal_show = true
				}else{
					this.$u.toast("生成二维码失败！");
				}
				// wx.cloud.callFunction({
				// 	name: 'getQrCode',
				// 	data: {
				// 		scene: scene,
				// 		page: 'pages_tabbar_contact/common_contact/guide',
				// 		qrid: this.QRID,
				// 		envVersion: 'trial',
				// 		width: '800'
				// 	}
				// }).then(res => {
				// 	this.maskData = globalData.qrURL + this.QRID + ".jpg"
				// 	this.hideLoading()
				// 	this.modal_show = true
				// }).catch(err => {
				// 	console.error(err)
				// });
			},
			 
			// toast生成中
			showLoading() {
				wx.showLoading({
				  title: '正在生成中...',
				  icon: 'none',
				});
			},
			 
			hideLoading() {
				wx.hideLoading();
			},
			
			// 长按保存图片
			saveImg(url){
			  //用户需要授权
			  wx.getSetting({
				success: (res) => {
					if (!res.authSetting['scope.writePhotosAlbum']) {
					 wx.authorize({
					  scope: 'scope.writePhotosAlbum',
					  success:()=> {
					   // 同意授权
					   this.saveImg1(url);
					  },
					  fail: (res) =>{
					   console.log(res);
					  }
					 })
					}else{
					 // 已经授权了
					 this.saveImg1(url);
					}
				   },
				   fail: (res) =>{
					console.log(res);
				   }
				})
			},
			 
			saveImg1(url){
				wx.getImageInfo({
				   src: url,
				   success:(res)=> {
					let path = res.path;
					wx.saveImageToPhotosAlbum({
					 filePath:path,
					 success:(res)=> { 
					    this.showMSG("success","保存成功！")
					 },
					 fail:(res)=>{
					  console.log(res);
					 }
					})
				   },
				   fail:(res)=> {
					console.log(res);
				   }
				})
			},
			
			/**
			 * 点击模态框的确定按钮删除生成的菊花码
			 */
			delQrCode(){
				// let fileID = globalData.qrURL + this.QRID + ".jpg"
				// wx.cloud.callFunction({
				// 	name: 'delFiles',
				// 	data: {
				// 		fileID: fileID
				// 	}
				// }).then(res => {
				// 	console.log(res)
				// }).catch(err => {
				// 	console.error(err)
				// });
			},
			
			/**
			* 生成uuid
			*/
			guid() {
			  return (this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4() + this.S4());
			},
			
			S4() {
			  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			
			/**
			 * 调用动作后的前端回调函数
			 * @param {*} obj
			 */
			_runShareCallBack(obj) {
				console.log("************************_runShareCallBack2,  try tun _runShareCallBack2...************************", obj);
				try {
					this.$emit("successCallBack", obj)
				} catch (error) {
				}
			},
			
			/** 
			 * 保存到相册
			 */
			SaveAlbum(url) {
				wx.getImageInfo({
				   src: url,
				   success:(res)=> {
					let path = res.path;
					wx.saveImageToPhotosAlbum({
					 filePath:path,
					 success:(res)=> { 
					    this.showMSG("success","保存成功！")
					 },
					 fail:(res)=>{
					  console.log("----SaveAlbum fail---")
					  console.log(res);
						this.$u.toast("请点击右上角进入设置并开启添加到相册的权限才能保存到相册噢！")
					 }
					})
				   },
				   fail:(res)=> {
					console.log(res);
				   }
				})
			},
			
			/** 
			 * 复制链接
			 */
			copyLink (link) {
				wx.setClipboardData({
				  //准备复制的数据内容
				  data: link,
				  success: function (res) {
					wx.showToast({
					  title: '已复制',
					});
				  }
				});
			},
			
			/** 
			 * 提供给调用页面代码唤醒弹窗
			 */
			wakeUpPop() {
				this.show = true
			},
			
			/**
			 * 提供给调用页面代码收起弹窗
			 */
			putAwayPop() {
				this.show = false
			}
			
		}
		
	}
</script>

<style scoped>
	@import "@/common/scss/sharebtn.scss";
	.box{
		height: 300rpx;
	}
	
	.item{
		width: 50%;
		height: 250rpx;
		text-align: center;
		padding-top: 20rpx;
	}
	
	.u-image{
		margin: 0 auto;
	}
	
	.share{
		color: #fff;
		background-color: #1aad19;
	}
	
	.share1{
	  width: 100rpx;
	  height: 100rpx;
	  margin: 0 auto;
	  background-size: 100rpx 100rpx;
	  background-repeat:no-repeat;
	  border:none !important;
	  outline:none !important;
	  box-sizing:border-box !important;
	  background-image:url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/wechat.png);
	}
	
	.share2{
	  width: 100rpx;
	  height: 100rpx;
	  margin: 0 auto;
	  background-size: 100rpx 100rpx;
	  background-repeat:no-repeat;
	  border:none !important;
	  outline:none !important;
	  box-sizing:border-box !important;
	  background-image:url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/code.png);
	}
	
	/* button {
		position:relative !important;
		display:block !important;
		margin-left:auto !important;
		margin-right:auto !important;
		padding-left:14px !important;
		padding-right:14px !important;
		box-sizing:border-box !important;
		font-size:16px !important;
		text-align:center !important;
		text-decoration:none !important;
		line-height:2.55555556 !important;
		border-radius:0px !important;
		-webkit-tap-highlight-color:transparent !important;
		overflow:hidden !important;
		color:#000000 !important;
		background-color:#FFFFFF !important;
	} */
	
	/* button::after{
		border: none;
		border-radius: 0;
	} */
	
	.invite {
		padding-left: 2%;
		padding-right: 2%;
		background-color: #d6d0d021;
	}
	
	.invite-title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.invite-code {
		font-size: 32rpx;
		font-weight: bold;
		color: #F02323;
	}
	
	.invite-code-font {
		font-size: 25rpx;
		font-weight: bold;
		color: #F02323;	
	}
	
	.invite-tip {
		font-size: 25rpx;
		color: #bcbcbc;
	}
	
	.customStyle1{
	  border: none !important;
	  background-color:transparent;
	  padding-left: 0rpx !important;
	  padding-right: 0rpx !important;
	}
	
	.customStyle1::after {
	  border: none;
	}
	
	.customStyle2{
	  height: 100rpx;
	  border: none !important;
	  background-color:transparent;
	  float: left;
	  margin-right: 1rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}

	.customStyle2::after {
	  border: none;
	}
	
	.customStyle3 {
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		float: left;
		margin-right: 1rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: 55px !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}
	
	.customStyle3::after {
	  border: none;
	}
	
	.customStyle3-span{
		font-size: 12px;
		color: #666;
		line-height: 45rpx;
	}
	
	.customStyle5 {
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		float: left;
		margin-right: 1rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}
	
	.customStyle5::after {
	  border: none;
	}
	
	.customStyle5-span{
		font-size: 20rpx;
		color: #000000;
		line-height: 45rpx;
	}

</style>
